<template>
  <div class="container">
    <nav-bar title="公示详情"></nav-bar>
    <div class="title-box">
      {{ state.detail.publicityTitle }}
    </div>
    <div class="title-second-box">
      <span>发布时间：{{ state.detail.publicityTime }}</span>
      <span>
        公示来源：{{ formatDictCode('GSQD', state.detail.publicityTitle) || '--' }}
      </span>
      <span>
        公示时间：{{ state.detail.publicityBeginDate }} 至
        {{ state.detail.publicityEndDate }}
      </span>
      <span>联系电话：{{ state.detail.publicityTel }}</span>
    </div>
    <div class="content-box">
      {{ state.detail.publicityContent }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { get_detail } from '@/api/api'
import { appCurrentState } from '@/pinia/modules/app.js'
import { formatDictCode } from '@/utils/format.js'

const state = reactive({
  detail: {}
})

const getDetail = async () => {
  let res = await get_detail(
    appCurrentState().getCurrentDetailId,
    '/gov-portal/rating'
  )
  if (res.succeed) {
    state.detail = res.data
  }
}

onBeforeMount(() => {
  getDetail()
})
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #fff;
  .title-box {
    width: calc(100% - 80px);
    margin: 26px auto;
    font-size: 36px;
    font-weight: bold;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .title-second-box {
    width: calc(100% - 80px);
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    span {
      margin: 5px 0;
      display: inline-block;
      width: 100%;
      font-size: 32px;
      color: #aaabad;
    }
  }
  .content-box {
    width: calc(100% - 80px);
    margin: 30px auto;
    text-indent: 2em;
    font-size: 32px;
    color: #000000;
  }
}
</style>
